<template>
  <div class="rank">
    <div class="title">岗位要求专业前5</div>
    <div class="list">
      <div v-if="!top[0]" class="none">暂无数据~</div>
      <div class="item">
        <div class="detail" :title="top[0].name + ' ' + top[0].cnt" v-if="top[0]">
          <span class="num-first">1</span>
          <span class="name">{{top[0].name}}</span>
          <span class="num">
            <grow-num :value="Number(top[0].cnt || 0)"></grow-num>
          </span>
        </div>
        <div class="detail" :title="top[1].name + ' ' + top[1].cnt" v-if="top[1]">
          <span class="num-first">2</span>
          <span class="name">{{top[1].name}}</span>
          <span class="num">
            <grow-num :value="Number(top[1].cnt || 0)"></grow-num>
          </span>
        </div>
      </div>
      <div class="item">
        <div class="detail" :title="top[2].name + ' ' + top[2].cnt" v-if="top[2]">
          <span class="num-second">3</span>
          <span class="name">{{top[2].name}}</span>
          <span class="num">
            <grow-num :value="Number(top[2].cnt || 0)"></grow-num>
          </span>
        </div>
        <div class="detail" :title="top[3].name + ' ' + top[3].cnt" v-if="top[3]">
          <span class="num-second">4</span>
          <span class="name">{{top[3].name}}</span>
          <span class="num">
            <grow-num :value="Number(top[3].cnt || 0)"></grow-num>
          </span>
        </div>
      </div>
      <div class="item">
        <div class="detail" :title="top[4].name + ' ' + top[4].cnt" v-if="top[4]">
          <span class="num-third">5</span>
          <span class="name">{{top[4].name}}</span>
          <span class="num">
            <grow-num :value="Number(top[4].cnt || 0)"></grow-num>
          </span>
        </div>
        <div class="detail" :title="top[5].name + ' ' + top[5].cnt" v-if="top[5]">
          <span class="num-third">6</span>
          <span class="name">{{top[5].name}}</span>
          <span class="num">
            <grow-num :value="Number(top[5].cnt || 0)"></grow-num>
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import {mapGetters} from 'vuex'
import GrowNum from '../grow-num/grow-num.vue'
import {INTERVAL} from '../../common/js/config'

export default {
  components: {GrowNum},
  name: 'rank-3-m',
  computed: {
    ...mapGetters([
      'currentTime'
    ])
  },
  data() {
    return {
      top: [],
      last: []
    }
  },
  methods: {
    getData() {
      this.$post('/service/business/statistic/statistic/getJobByProfessionTop5', {
        beginDate: this.currentTime.start,
        endDate: this.currentTime.end
      }).then(res => {
        this.top = res.result
      })
    },
    start() {
      clearInterval(this.timer)
      this.getData()
      if (this.currentTime.end === this.$dateFormat(new Date(), 'yyyy-MM-dd')) {
        this.timer = setInterval(() => {
          this.getData()
        }, INTERVAL)
      }
    }
  },
  created() {
    this.start()
    this.$watch('currentTime', () => {
      setTimeout(() => {
        this.start()
      }, 20)
    })
  }
}
</script>
